<template>
<!-- 登录页面 -->
    <div>
         <div class="box">
            <h1>Login</h1>
            <div class="yh">
                <p>用户名：</p>
                <input type="text" v-model="phone" placeholder="请输入您登录电话号码.." >
            </div>
            <div class="mm">
                <p>密码：</p>
                <input type="password" v-model="password" placeholder="请输入您登录的密码..">
            </div>
            <button @click="submit" >登录</button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                phone: '',
                password: '',
            };
        },
        methods:{
            // 手机号码登录
            submit(){
                let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                
                let pass = /^[a-zA-Z0-9]\w{8,17}$/;
             
                if(!reg.test(this.phone) || !pass.test(this.password) ){
                    this.$toast("请输入正确手机号码与密码");
                    return;
                }
                console.log("成功");
                        window.localStorage.setItem("token","123456QWq");
                        window.localStorage.setItem("userId","15676079620");
                        this.$toast("登陆成功");
                        this.$router.push("/personal");
            }
        }
    }
</script>

<style lang="scss" >
// @import "../assets/css/my.css";
.box{
    padding: 32px;
    text-align: center;
    h1{
        text-align: center;
        font-weight: 500;
        margin-bottom: 32px ;
    }
}
.yh{
    margin-bottom:16px ;
    p{
        text-align: left;
        font-size: 16px;
        color: #333;
    }
    span{
        font-size: 14px;
        color: #666;
    }
    input{
        width: 100%;
        height: 18px;
        line-height: 18px;
        font-size: 14px;
        text-indent: 1em;
        border-radius: 15px;
        padding:5px 0;
        // box-shadow: 0 0 10px 10px #9ad1e9a8;
        margin: 10px 0;
        border: 1px solid #9ad1e9a8;
    }
    input:hover{
        width: 100%;
        height: 18px;
        line-height: 18px;
        font-size: 14px;
        text-indent: 1em;
        border-radius: 15px;
        padding:5px 0;
        box-shadow: 0 0 10px 10px #9ad1e9a8;
        margin: 10px 0;
        border: 1px solid #9ad1e9a8;
    }
}
.mm{
       margin-bottom:16px ;
       text-align: left;
    p{
        font-size: 16px;
        color: #333;
    }
    span{
        font-size: 14px;
        color: #666;
    }
    input{
        width: 100%;
        height: 18px;
        line-height: 18px;
        font-size: 14px;
        text-indent: 1em;
        border-radius: 15px;
        padding:5px 0;
        // box-shadow: 0 0 10px 10px #9ad1e9a8;
        margin: 10px 0;
        border: 1px solid #9ad1e9a8;
    }
    input:hover{
        width: 100%;
        height: 18px;
        line-height: 18px;
        font-size: 14px;
        text-indent: 1em;
        border-radius: 15px;
        padding:5px 0;
        box-shadow: 0 0 10px 10px #9ad1e9a8;
        margin: 10px 0;
        border: 1px solid #9ad1e9a8;
    }
}
.box button{
    width: 160px;
    height: 32px;
    margin: 30px;
    border-radius: 16px;
    color: #fff;
    background-color: rgba(0, 191, 255, 0.717);
    border: 1px solid #9ad1e9a8;
}
.box button:hover{
    width: 160px;
    height: 32px;
    margin: 30px;
    border-radius: 16px;
    color: #fff;
    background-color: rgba(0, 157, 255, 0.877);
    border: 1px solid #9ad1e9a8;
}
</style>